
/*
 * @Author: 于建霞
 * @Date: 2020-12-08 16:28:39
 * @LastEditTime: 2021-01-15 17:00:58
 * @LastEditors: Please set LastEditors
 * @Description: 编辑弹框
 * @FilePath: \3upsi_v3_web\apps\vip\src\pages\vipAccess\components\editPassenger\index.jsx
 */


import React, { useState, useCallback, useRef, useEffect } from 'react';
import { Modal, Button, Card, Form, Input, Select, Row, Col, message } from 'antd';
import ProTable from '@ant-design/pro-table';
import { useRequest, useBoolean } from '@umijs/hooks';
import { saveVipInfo, updateAcmpInfo } from '../../service';
import { getScanResults } from '../../scanParsing.js';
import styles from './index.less';

const { Option } = Select;
const { TextArea } = Input;
const EditPassenger = (props) => {

    const { form: { getFieldDecorator, validateFields, setFieldsValue, getFieldValue  },
        editPassengerVisible,
        setEditPassengerVisible,
        scanCode,
        selectRow,
        reloadTable,
        vipRoomObj,
        paxTypeData
    } = props;
    // 设置按钮的禁用 和 启用
    const { state: inputDisable, setTrue, setFalse } = useBoolean(true);
    const [updateData, setUpdateData] = useState({});
    // 勾选的旅客数据
    useEffect(() => {
        if (selectRow.length > 0) {
            let tempObj = selectRow[0];
            setUpdateData(tempObj);
            setFieldsValue({
                bordCardCode2: tempObj.bordCardCode2, // 登机牌条码
                tktNo: tempObj.tktNo, // 票号
                paxName: tempObj.paxName, // 旅客姓名
                flightNo: tempObj.flightNo, // 航班号
                bordNo: tempObj.bordNo, // 值机序号
                orgCityAirpStr: tempObj.orgCityAirpStr, // 始发地
                dstCityAirpStr: tempObj.dstCityAirpStr, // 目的地
                lclDptDate: tempObj.lclDptDate, // 航班日期
                flightStatus: tempObj.flightStatus, // 航班状态
                entryFlag: tempObj.entryFlag, // 准入标志
                // paxTypeCode: tempObj.paxTypeCode, // 旅客类型
                status: tempObj.status, // 旅客状态
                entryTime: tempObj.entryTime, // 迎接时间
                leaveTime: tempObj.leaveTime, // 送别时间
                passengerLike: tempObj.passengerLike, // 旅客喜好
                memo: tempObj.memo, // 备注信息
            });
        }
    }, [selectRow,editPassengerVisible]);
    
    useEffect(() => {
        setFieldsValue({
            vipRoom:vipRoomObj?.roomName
        });
    }, [vipRoomObj])
    // 编辑旅客
    const { run:updataFun, loading:updataFunLoading } = useRequest((info)=> {
       return selectRow[0]?.isAcmp == 1 ? updateAcmpInfo(info) : saveVipInfo(info);
    },{
        manual: true,
        onSuccess: (data) => {
            message.success('操作成功')
            setEditPassengerVisible(false);
            reloadTable();
        }
    })
    // 保存
    const handleOk = () => {
        validateFields(['paxTypeCode'],(err, values) => {
            if (!err) {
                updataFun({id:updateData.id,memo:getFieldValue('memo'),paxTypeCode:values.paxTypeCode.toString()})
            }
        });
    }
    // 取消
    const handleCancel = () => {
        setEditPassengerVisible(false);
        setUpdateData({});
    }
    return (
        <Modal
            title="编辑旅客"
            visible={editPassengerVisible}
            maskClosable={false}
            destroyOnClose={true}
            onCancel={handleCancel}
            width="80%"
            footer={
                <>
                    <Button onClick={handleCancel}>取消</Button>
                    <Button type="primary" loading={updataFunLoading} onClick={handleOk}>保存</Button>
                </>
            }
        >
            <Form layout="vertical">
                {/* 第一块，贵宾室，登机牌条码 */}
                <Row gutter={24}>
                    <Col span={8}>
                        <Form.Item label="贵宾室：" style={{ marginBottom: "4px" }}>
                            {getFieldDecorator('vipRoom')(
                                <Input disabled={inputDisable} placeholder="贵宾室" />
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="登机牌条码：" style={{ marginBottom: "4px" }}>
                            {getFieldDecorator('bordCardCode2')(
                                <Input disabled={inputDisable} placeholder="登机牌条码" />
                            )}
                        </Form.Item>
                    </Col>
                </Row>
                {/* 提取旅客数据 */}
                <Card
                    title="提取旅客数据"
                    style={{ width: '100%', height: "200" }}
                    hoverable={true}
                    className={styles.smsModal}
                    headStyle={{ backgroundColor: "#FAFAFA" }}
                    bodyStyle={{ padding: 12 }}>
                    {/* 第一行 */}
                    <Row gutter={24}>
                        <Col span={8}>
                            <Form.Item label="票号：" style={{ marginBottom: "4px" }}>
                                {getFieldDecorator('tktNo')(
                                    <Input disabled={inputDisable}  placeholder="票号" />
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="旅客姓名：" style={{ marginBottom: "4px" }}>
                                {getFieldDecorator('paxName')(
                                    <Input disabled={inputDisable}  placeholder="旅客姓名" />
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="航班号：" style={{ marginBottom: "4px" }}>
                                {getFieldDecorator('flightNo')(
                                    <Input disabled={inputDisable}  placeholder="航班号" />
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                    {/* 第二行 */}
                    <Row gutter={24}>
                        <Col span={8}>
                            <Form.Item label="值机序号：" style={{ marginBottom: "4px" }}>
                                {getFieldDecorator('bordNo')(
                                    <Input disabled={inputDisable}  placeholder="值机序号" />
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="始发地：" style={{ marginBottom: "4px" }}>
                                {getFieldDecorator('orgCityAirpStr')(
                                    <Input disabled={inputDisable}  placeholder="始发地" />
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="目的地：" style={{ marginBottom: "4px" }}>
                                {getFieldDecorator('dstCityAirpStr')(
                                    <Input disabled={inputDisable}  placeholder="目的地" />
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                    {/* 第三行 */}
                    <Row gutter={24} type="flex" justify="space-between" align="bottom">
                        <Col span={8}>
                            <Form.Item label="航班日期：" style={{ marginBottom: "4px" }}>
                                {getFieldDecorator('lclDptDate')(
                                    <Input disabled={inputDisable}  placeholder="航班日期" />
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                </Card>
                {/* 旅客信息 */}
                <Card
                    title="旅客信息"
                    style={{ width: '100%', height: "200" }}
                    hoverable={true}
                    style={{ marginTop: "30px" }}
                    className={styles.smsModal}
                    headStyle={{ backgroundColor: "#FAFAFA" }}
                    bodyStyle={{ padding: 12, }}
                >
                    {/* 第一行 */}
                    <Row gutter={24}>
                        <Col span={8}>
                            <Form.Item label="航班状态：" style={{ marginBottom: "4px" }}>
                                {getFieldDecorator('flightStatus')(
                                    <Select
                                    allowClear={true}
                                    showSearch
                                    disabled={inputDisable} 
                                    placeholder='航班状态'
                                    defaultActiveFirstOption={false}
                                    showArrow={false}
                                    filterOption={true}
                                    optionFilterProp="children"
                                    notFoundContent={null}
                                >
                                    <Option value={null}>正常</Option>
                                    <Option value='D'>延误</Option>
                                    <Option value='C'>取消</Option>
                                </Select>
                                )}
                            </Form.Item>
                        </Col>
                        {/* <Col span={8}>
                            <Form.Item label="准入标志：" style={{ marginBottom: "4px" }}>
                                {getFieldDecorator('entryFlag')(
                                    <Input disabled={inputDisable}  placeholder="请输入短信内容" />
                                )}
                            </Form.Item>
                        </Col> */}
                         <Col span={8}>
                            <Form.Item label="旅客类型：" style={{ marginBottom: "4px" }}>
                                {getFieldDecorator('paxTypeCode', 
                                    {
                                        initialValue:updateData?.paxTypeCode ? updateData?.paxTypeCode.split(',') : [],
                                        rules: [{ required: true, message: '请选择旅客类型' }],
                                    }
                                )(
                                    <Select
                                        allowClear={true}
                                        mode="multiple"
                                        showSearch
                                        placeholder='请选择旅客类型'
                                        defaultActiveFirstOption={false}
                                        showArrow={false}
                                        filterOption={true}
                                        optionFilterProp="children"
                                        notFoundContent={null}
                                    >
                                        {
                                            paxTypeData && paxTypeData.map((v, i) => {
                                                return (
                                                <Option key={v.paxTypeCode} value={v.paxTypeCode}>{v.paxTypeName}</Option>
                                                )
                                            })
                                        }
                                    </Select>
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="旅客状态：" style={{ marginBottom: "4px" }}>
                                {getFieldDecorator('status')(
                                    <Select
                                    allowClear={true}
                                    showSearch
                                    disabled={inputDisable}
                                    placeholder='旅客状态'
                                    defaultActiveFirstOption={false}
                                    showArrow={false}
                                    filterOption={true}
                                    optionFilterProp="children"
                                    notFoundContent={null}
                                >
                                     <Option value="1">已迎接</Option>
                                     <Option value="2">已送别</Option>
                                     <Option value="3">已拒绝</Option>
                                     {/* <Option value="4">未迎接</Option> */}
                                </Select>
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                    {/* 第二行 */}
                    <Row gutter={24}>
                        
                        <Col span={8}>
                            <Form.Item label="迎接时间：" style={{ marginBottom: "4px" }}>
                                {getFieldDecorator('entryTime')(
                                    <Input disabled={inputDisable} placeholder="迎接时间" />
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item label="送别时间：" style={{ marginBottom: "4px" }}>
                                {getFieldDecorator('leaveTime')(
                                    <Input disabled={inputDisable} placeholder="送别时间" />
                                )}
                            </Form.Item>
                        </Col>
                    </Row>
                    {/* 第三行 */}
                    <Row gutter={24}>
                        
                    </Row>
                    <Form.Item label="旅客喜好：" style={{ marginBottom: "4px" }}>
                        {getFieldDecorator('passengerLike')(
                            <TextArea disabled={inputDisable} rows={2} placeholder="旅客喜好" />
                        )}
                    </Form.Item>
                    <Form.Item label="备注信息：" style={{ marginBottom: "4px" }}>
                        {getFieldDecorator('memo', 
                        // {
                        //     rules: [{ required: true, message: '请输入备注信息' }],
                        // }
                        )(
                            <TextArea rows={2} placeholder="请输入备注信息" maxLength="200"/>
                        )}
                    </Form.Item>

                </Card>
            </Form>
        </Modal>
    )
}

export default Form.create()(EditPassenger);